import React, { Component } from 'react';
import { message } from 'antd';
import ColorSelect from './../../components/ColorSelect';
import "./index.less";

class Home extends Component {
	updateColor = (key,color) => {
		this.changeColor(color);
		localStorage.setItem("color", color);
	}
	changeColor = (color) => {
		window.less
		.modifyVars(
			{
				'@primary-color': color,
				'@link-color': color,
				'@btn-primary-bg': color,
			}
		)
		.then(() => { })
		.catch(error => {
			message.error(`Failed to update theme`);
		});
	}
	componentDidMount(){
		let color = localStorage.getItem("color");
		if(color){
			this.changeColor(color);
		}
	}
	render(){
		const color = localStorage.getItem("color");
		return (
			<div className="home-wrap">
				<span>欢迎您</span>
				<ColorSelect 
				 style={{ verticalAlign: "middle" }}
				 color={color} //编辑的时候，用于颜色的回显
				 objKey = {1} //因页面多次使用，传入key值，用于区分色块更新，因key是关键字，这里使用了objKey作为属性名                                                                          
				 updateColor = {this.updateColor} //传入父组件方法，更新颜色的拾取     
				/>
			</div>
		)
	}
}

export default Home;